<template>
<div class="row">
  <div class="col relative-position scroll" style="background-color: rgba(138,209,222,0.28);height: calc(100vh - 80px);">
    <div class="display-item text-h4">机床状态</div>
    <q-virtual-scroll
      scroll-target="#virtual-scroll-target"
      :items="toolList"
      separator
      v-slot="{ item, index }"
    >
      <q-item clickable v-ripple :key="index"  class="row">
        <div class="col-3 relative-position">
          <div class="text-h6 text-bold absolute-center text-no-wrap">{{ item.customerNum }}</div>
        </div>
        <q-separator vertical class=""/>
        <q-list dense class="col">
          <q-item class="text-subtitle1">
            <q-item-section>
              <q-item-label class="text-black">序号：<span class="text-bold">{{ item.index }}</span></q-item-label>
            </q-item-section>
            <q-item-section>
              <q-item-label class="text-black">状态：<span :class="statusColour[item.status]" class="text-bold"> {{ statusOption[item.status] }}</span></q-item-label>
            </q-item-section>
          </q-item>
<!--          <q-separator class=""/>-->
          <q-item>
            <q-item-section>
              <q-item-label class="text-black">自动生产：<span :class="item.auto?'text-green text-bold':'text-bold'">{{item.auto?'开启':'关闭'}}</span></q-item-label>
            </q-item-section>
            <q-item-section>
              <q-item-label class="text-black">位置：<span :class="'text-bold'">{{item.workPoseName?item.workPoseName:'暂无'}}</span></q-item-label>
            </q-item-section>
          </q-item>
        </q-list>
      </q-item>
    </q-virtual-scroll>
  </div>
  <div class="col relative-position">
    <div class="display-item text-h4">设备状态</div>
    <q-scroll-area style="height: calc(100vh - 80px);">
      <q-list bordered separator>
        <q-item
          clickable
          style="height: 20%"
          v-for="(item,index) in deviceList"
          :key="index"
          class="row"
        >
          <div class="col-3 relative-position">
            <div class="text-h5 text-bold absolute-center">{{ item.device }}</div>
<!--            <div v-if="!item.centerConnected" class="text-h6 text-bold text-grey-7">机器人不在线</div>-->
<!--            <div v-else-if="item.data.broadcast != null && item.data.broadcast.includes('电梯')" class="text-h6 text-bold">正在乘电梯</div>-->
<!--            <div v-else-if="item.data.broadcast != null && item.data.broadcast.includes('目的地被占用')" class="text-subtitle1 text-bold">目的地被占用，前往最近的待命点</div>-->
<!--            <div v-else-if="deadlocks[item.device]" class="text-h6 text-bold text-warning">正在被交管控制</div>-->
          </div>
          <q-separator vertical class="q-ma-sm"/>
          <q-list dense class="col q-pa-none">
            <q-item class="text-h6">
              <q-item-section>
                <q-item-label class="text-black">电量</q-item-label>
                <q-item-label :class="item.batteryStatus?'text-red text-bolg':''">
                  {{ item.batteryNumber === null ? '暂无电量' : item.batteryNumber + '%' }}
                </q-item-label>
              </q-item-section>
              <q-item-section>
                <q-item-label class="text-black">状态</q-item-label>
                <q-item-label class="text-bold" :class="deviceStatusColor[item.status]">
<!--                  {{ item.data.status==='计算中'?'路线规划中':item.data.status || (item.charge ? '充电中' : '无订单') }}-->
                  {{ deviceStatusName[item.status] }}
                </q-item-label>
              </q-item-section>
              {{ item.data.batteryCurrency }}
            </q-item>
            <q-separator class="q-ma-sm"/>
            <q-item>
              <q-item-section>
                <q-item-label class="text-black">所在位置</q-item-label>
                <q-item-label>{{ item.area || '当前暂无位置' }}</q-item-label>
              </q-item-section>
            </q-item>
          </q-list>
<!--          <q-separator vertical class="q-ma-sm"/>-->
<!--          <q-list dense class="col-4" v-if="item.data.orderID !== null">-->
<!--            <q-item>-->
<!--              <q-item-section>-->
<!--                <q-item-label class="text-black">订单号</q-item-label>-->
<!--                <q-item-label>{{ item.data.orderID }}</q-item-label>-->
<!--              </q-item-section>-->
<!--            </q-item>-->
<!--          </q-list>-->
<!--          <q-list class="col-4" v-else>-->
<!--            <q-item class="text-h6">-->
<!--              <q-item-section>-->
<!--                <q-item-label class="text-black">当前播报</q-item-label>-->
<!--                <q-item-label>{{ item.data.broadcast || '暂无播报内容' }}</q-item-label>-->
<!--              </q-item-section>-->
<!--            </q-item>-->
<!--          </q-list>-->
        </q-item>
      </q-list>
    </q-scroll-area>
  </div>
</div>
</template>
<script setup>
import { api } from 'boot/axios'
import { useAPIStore } from 'stores/api'
import { ref, onMounted, onUnmounted } from 'vue'
import { useQuasar } from 'quasar'

const statusOption = {
  error: '故障',
  offline: '离线',
  working: '加工中',
  idle: '初始化(物料)',
  load_goods: '上料中'
}
const statusColour = {
  error: 'text-red text-bold',
  offline: 'text-grey',
  working: 'text-green',
  idle: 'text-green',
  load_goods: 'text-green'
}
const deviceStatusColor = {
  idle: 'text-secondary',
  running: 'text-primary',
  pause: 'text-bold text-warning',
  error: 'text-bold text-negative'
}

const deviceStatusName = {
  idle: '空闲',
  running: '运动中',
  pause: '暂停',
  error: '错误需复位'
}

const deviceList = ref([])
const toolList = ref([])
const $q = useQuasar()
let timer
onMounted(() => {
  getAll()
})
onUnmounted(() => {
  clearTimeout(timer)
})

function getAll () {
  getDevice()
  getToolList()
  timer = setTimeout(() => { getAll() }, 5000)
}
function getDevice () {
  api.get(useAPIStore().centerUrl + 'center/status').then(rs => {
    deviceList.value = rs.data
    deviceList.value = rs.data.filter(v => v.mapID && v.data !== null)
  })
}
// 获取机床信息
function getToolList () {
  api.get(useAPIStore().taskUrl + 'machine/data/all').then(rs => {
    if (rs.data.code === 200) {
      toolList.value = rs.data.data
      toolList.value.forEach(item => {
        if (item.auto === null) {
          item.auto = false
        }
      })
      toolList.value = toolList.value.filter(item => item.status === 'error')
      toolList.value = toolList.value.concat(rs.data.data.filter(item => item.status !== 'error'))
    } else {
      $q.notify({ message: '机床信息获取失败', type: 'negative' })
    }
  })
}
</script>
<style scoped>
.display-item{
  color: rgba(153, 153, 153, 0.3);
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center center !important;
  transform: translate(-50%, -50%) rotate(-45deg);
}
</style>
